<template>
  <div class="divider" :class="classes">
    <div class="divider-title" v-if="direction == 'horizontal'">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    color: {
      type: String,
      default: 'primary'
    },
    orientation: {
      type: String,
      default: 'center'
    },
    direction: {
      type: String,
      default: 'horizontal'
    },
    dashed: {
      type: Boolean,
      defalt: false
    }
  },
  computed:{
    classes(){
      const cls = [ `divider-${this.color}`,`divider-${this.orientation}`,`divider-${this.direction}` ]
      return cls ;
    }
  }
}
</script>
